<template>
  <div class="content">
    <!--    站点所有图片-->
    <div class="content-row" style="display:flex;justify-content: center">
      <!--      网站logo-->
      <div class="content-logo">
        <div style="text-align: center">
          <h3>网站LOGO</h3>
        </div>
        <div>
          <el-upload
            :class="{stleA:upload.logoList.length === 0,styleB:upload.logoList.length === 1}"
            :limit="1"
            :file-list="upload.logoList"
            :multiple="false"
            :action="upload.action"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="logoListChange"
            :on-remove="logoListRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="upload.dialogVisible">
            <img width="100%" :src="upload.dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <!--      end-->
      <!--      页脚logo-->
      <div class="content-assess-img">
        <div style="text-align: center">
          <h3>页脚logo</h3>
        </div>
        <div>
          <el-upload
            :class="{stleA:upload.footerLogoList.length === 0,styleB:upload.footerLogoList.length === 1}"
            :limit="1"
            :file-list="upload.footerLogoList"
            :action="upload.action"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="footerLogoListChange"
            :on-remove="footerLogoListRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="upload.dialogVisible">
            <img width="100%" :src="upload.dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <!--      end-->
      <!--      考核规则图片-->
      <div class="content-assess-img">
        <div style="text-align: center">
          <h3>考核规则背景图</h3>
        </div>
        <div>
          <el-upload
            :class="{stleA:upload.checkList.length === 0,styleB:upload.checkList.length === 1}"
            :limit="1"
            :action="upload.action"
            :file-list="upload.checkList"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="checkListChange"
            :on-remove="checkListRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="upload.dialogVisible">
            <img width="100%" :src="upload.dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <!--      end-->
      <!--      课程学习图片-->
      <div class="content-assess-img">
        <div style="text-align: center">
          <h3>课程学习背景图</h3>
        </div>
        <div>
          <el-upload
            :class="{stleA:upload.classList.length === 0,styleB:upload.classList.length === 1}"
            :limit="1"
            :action="upload.action"
            :file-list="upload.classList"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="classListChange"
            :on-remove="classListRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="upload.dialogVisible">
            <img width="100%" :src="upload.dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <!--      end-->
      <!--      页脚背景图-->
      <div class="content-footer-img">
        <div style="text-align: center">
          <h3>页脚背景图</h3>
        </div>
        <div>
          <el-upload
            :limit="1"
            :class="{stleA:upload.footerBgList.length === 0,styleB:upload.footerBgList.length === 1}"
            :action="upload.action"
            :file-list="upload.footerBgList"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="footerBgListChange"
            :on-remove="footerBgListRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="upload.dialogVisible">
            <img width="100%" :src="upload.dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <!--      end-->
      <!--      页脚二维码-->
      <div class="content-footer-img">
        <div style="text-align: center">
          <h3>页脚二维码</h3>
        </div>
        <div>
          <el-upload
            :class="{stleA:upload.footerQrList.length === 0,styleB:upload.footerQrList.length === 1}"
            :limit="1"
            :action="upload.action"
            :file-list="upload.footerQrList"
            list-type="picture-card"
            :on-success="footerQrListChange"
            :on-preview="handlePictureCardPreview"
            :on-remove="footerQrListRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="upload.dialogVisible">
            <img width="100%" :src="upload.dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <!--      end-->
    </div>
    <!--    end-->

    <!--    页脚配置-->
    <div class="content-footer">
      <div class="content-footer-left"></div>
      <h3>页脚配置</h3>
      <div class="content-footer-right"></div>
    </div>
    <!--    end-->

    <!--    联系我们-->

    <div class="content-contact">
      <div>
        <div style="width: 500px; ">
          <el-card class="box-card">
            <div slot="header" style="height: 20px">
              <div><h3>联系我们</h3></div>
            </div>
            <div class="content-phone">
              <span>电话：</span>
              <div>
                <el-input minlength="11" maxlength="11" clearable v-model="form.phone" placeholder="请输入内容"></el-input>
              </div>
            </div>
            <div class="content-phone">
              <span>传真：</span>
              <div>
                <el-input clearable v-model="form.fax" placeholder="请输入内容"></el-input>
              </div>
            </div>
            <div class="content-phone">
              <span>邮箱：</span>
              <div>
                <el-input clearable v-model="form.email" placeholder="请输入内容"></el-input>
              </div>
            </div>
            <div class="content-phone">
              <span>地址：</span>
              <div>
                <el-input clearable v-model="form.address" placeholder="请输入内容"></el-input>
              </div>
            </div>
          </el-card>
        </div>
        <div>
          <div style="width: 500px; ">
            <el-card class="box-card">
              <div slot="header" style="height: 20px">
                <div><h3>备案信息</h3></div>
              </div>

              <div class="content-phone" style="margin-left: 14px">
                <span>备案号：</span>
                <div>
                  <el-input clearable v-model="form.number" placeholder="请输入内容"></el-input>
                </div>
              </div>
              <div class="content-phone">
                <span>跳转地址：</span>
                <div>
                  <el-input clearable v-model="form.addr" placeholder="请输入内容"></el-input>
                </div>
              </div>
              <div class="content-phone">
                <div>
                  <span>页脚信息：</span>
                </div>
                <div style="width: 20vw">
                  <el-input clearable v-model="form.information" placeholder="请输入内容"></el-input>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>


      <!--      相关链接-->
      <div class="content-link">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="margin-bottom: -18px">
            <div style="display: flex;justify-content: space-between">
              <h3>相关链接</h3>
              <div @click="addLink">
                <el-button type="primary" icon="el-icon-circle-plus" circle></el-button>
              </div>
            </div>
          </div>
          <!--          内容-->
          <div v-for="(item,index) in linkList" :key="index" class="content-link-template">
            <div>
              <div class="content-link-item" style="margin-left: 28px">
                <span>标题：</span>
                <div>
                  <el-input clearable v-model="item.title" placeholder="请输入内容"></el-input>
                </div>
              </div>
              <div style="display:flex">
                <span>跳转地址：</span>
                <div>
                  <el-input clearable v-model="item.link" placeholder="请输入内容"></el-input>
                </div>
              </div>
              <div style="position: relative;top: -50px;left: 300px">
                <el-button @click="delLink(index)" type="danger" icon="el-icon-delete" circle></el-button>
              </div>
            </div>
          </div>
          <!--          end-->
        </el-card>
      </div>
      <!--      end-->
    </div>
    <!--    end-->
    <div style="text-align: center">
      <el-button @click="onsubmit" type="primary">完成/更新</el-button>
    </div>
  </div>
</template>

<script>
let _this;
export default {
  data() {
    return {
      form: {
        phone: '',//电话
        fax: '',//传真
        email: '',//邮箱
        address: '',//地址
        information: '',//页脚信息
        number: '',//备案号
        addr: '',//备案条转地址
      },
      linkList: [],//相关链接
      upload: {
        logoList: [],
        footerLogoList: [],//页脚logo
        checkList: [],//考核规则
        footerBgList: [],//页脚背景图
        footerQrList: [],//页脚二维码
        classList: [],//课程学习
        dialogImageUrl: '',
        dialogVisible: false,
        action: 'http://www.free.com/api/Upload/upload',
      }
    }
  },
  methods: {
    /**
     * 完成提交
     */
    onsubmit: function () {
      _this.createOrUpdate();
    },
    handlePictureCardPreview: function (file) {
      this.upload.dialogImageUrl = file.url;
      this.upload.dialogVisible = true;
    },
    logoListRemove: function (val) {
      _this.upload.logoList = [];
    },
    footerLogoListRemove: function (val) {
      _this.upload.footerLogoList = [];
    },
    checkListRemove: function (val) {
      _this.upload.checkList = [];
    },
    classListRemove: function (val) {
      _this.upload.classList = [];
    },
    footerQrListRemove: function (val) {
      _this.upload.footerQrList = [];
    },
    footerBgListRemove: function (val) {
      _this.upload.footerBgList = [];
    },

    logoListChange: function (val, fileList) {
      _this.upload.logoList.push({url: val.data[0].url})
    },
    footerLogoListChange: function (val, fileList) {
      _this.upload.footerLogoList.push({url: val.data[0].url})
    },
    checkListChange: function (val, fileList) {
      _this.upload.checkList.push({url: val.data[0].url})
    },
    classListChange: function (val, fileList) {
      _this.upload.classList.push({url: val.data[0].url})
    },
    footerBgListChange: function (val, fileList) {
      _this.upload.footerBgList.push({url: val.data[0].url})
    },
    footerQrListChange: function (val, fileList) {
      _this.upload.footerQrList.push({url: val.data[0].url})
    },

    getSiteConfig: function () {
      _this.$store
        .dispatch("portal/getSiteConfig")
        .then(() => {
          let data = this.$store.state.portal.siteConfig;
          if (data) {
            let obj = JSON.parse(data.archival_information);
            if (obj) {
              _this.form.number = obj.number;
              _this.form.addr = obj.addr;
            }
            _this.form.phone = data.phone;
            _this.form.fax = data.fax;
            _this.form.email = data.email;
            _this.form.address = data.address;
            _this.form.information = data.information;
            if (data.link) _this.linkList = JSON.parse(data.link);
            if (data.logo_img) _this.upload.logoList.push({url: data.logo_img});
            if (data.footer_img) _this.upload.footerLogoList.push({url: data.footer_img});
            if (data.course_img) _this.upload.classList.push({url: data.course_img});
            if (data.assess_img) _this.upload.checkList.push({url: data.assess_img});
            if (data.qr_code) _this.upload.footerQrList.push({url: data.qr_code});
            if (data.footer_cover_img) _this.upload.footerBgList.push({url: data.footer_cover_img});
          }

        });
    },
    createOrUpdate: function () {
      _this.$store
        .dispatch("portal/createOrUpdateSiteConfig", {
          id: this.$store.state.portal.siteConfig == null ? 0 : this.$store.state.portal.siteConfig.id,
          link: JSON.stringify(_this.linkList),
          archival_information: JSON.stringify({number: _this.form.number, addr: _this.form.addr}),
          information: _this.form.information,
          logo_img: _this.upload.logoList.length > 0 ? _this.upload.logoList[0].url : '',
          assess_img: _this.upload.checkList.length > 0 ? _this.upload.checkList[0].url : '',
          course_img: _this.upload.classList.length > 0 ? _this.upload.classList[0].url : '',
          footer_img: _this.upload.footerLogoList.length > 0 ? _this.upload.footerLogoList[0].url : '',
          qr_code: _this.upload.footerQrList.length > 0 ? _this.upload.footerQrList[0].url : '',
          footer_cover_img: _this.upload.footerBgList.length > 0 ? _this.upload.footerBgList[0].url : '',
          phone: _this.form.phone,
          fax: _this.form.fax,
          email: _this.form.email,
          address: _this.form.address,
        })
        .then((res) => {
          const {data, msg} = res;
          if (data) {
            _this.$message.success(msg);
          } else {
            _this.$message.error(msg);
            _this.getSiteConfig();
          }
        });
    },

    /**
     * 添加相关链接
     */
    addLink: function () {
      let count = _this.linkList.length;
      if (count >= 5) return _this.$message.error('最多只能添加5条');
      let obj = {
        id: count + 1,
        title: '',
        link: ''
      }
      _this.linkList.push(obj);
    },
    /**
     * 删除链接
     */
    delLink: function (index) {
      _this.linkList.splice(index, 1);
    }
  },
  created() {
    _this = this;
    _this.getSiteConfig();
  },
}
</script>

<style lang="scss">
.styleA .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}

.styleB .el-upload--picture-card {
  display: none;
}

.content {
  padding: 20px;

  &-row {
    display: flex;

    .content-logo {
      margin-right: 10px;
    }

    .content-assess-img {
      margin-right: 10px;
    }

    .content-footer-img {
      margin-right: 10px;
    }

  }

  .content-footer {
    width: 100%;
    display: flex;
    margin-top: 20px;
    align-items: center;

    .content-footer-left {
      width: 45%;
      border: 2px #eeeeee dashed;
      margin-right: 10px;
    }

    .content-footer-right {
      width: 45%;
      border: 2px #eeeeee dashed;
      margin-left: 10px;
    }

    //margin-top: 20px;
    //border: 1px #eeeeee dashed;
  }

  .content-contact {
    display: flex;
    justify-content: space-around;

    .content-phone {
      margin-bottom: 10px;
      font-weight: 550;
      display: flex;
      align-items: center;
    }

    .content-link {
      width: 500px;
      font-weight: 550;

      .content-link-template {
        display: flex;
        flex-direction: column;

        .content-link-item {
          display: flex;
          margin-bottom: 5px;
        }
      }
    }
  }

}
</style>
